import React, { useState, useEffect } from "react";
import { Alert, Card, Row, Col, Badge } from "antd";

import { PageContainer } from "@ant-design/pro-layout";

import { history, useModel } from "umi";
import { fetchStatisticsSampler } from "@/api/miniSampling";

import money from "../../../public/images/money.svg";
import people from "../../../public/images/people.svg";
import "./index.less";

export default () => {
  const { initialState, setInitialState } = useModel("@@initialState");

  const [info, setInfo] = useState({});

  const getStatistics = async () => {
    const res = await fetchStatisticsSampler();
    setInfo({
      ...res?.data,
    });
  };

  useEffect(() => {
    getStatistics();
  }, []);

  const goTimeRecord = (t, num) => {
    if (!num) return;
    // 1=待离心 2=待冻存 3=通知寄样
    history.push(`/miniSampling/timeRecord?type=${t}`);
  };

  // 样品异常
  const goAbnormal = () => {
    if (info.samplingExceptionUnResamplingNum) {
      history.push(`/miniSampling/record?type=2`);
    }
  };

  return (
    <PageContainer ghost>
      <Card style={{ marginTop: 20, borderRadius: 10 }}>
        {/* <h2>实时概况</h2> */}
        <Row>
          <Col span={6}>
            <div className="item-two">
              {/* <div className="left">
                <img src={money} alt="" />
              </div> */}
              <div className="right">
                <span>采样异常</span>
                <h1>{info?.samplingExceptionUnResamplingNum || 0}</h1>
              </div>
            </div>
          </Col>
          <Col span={6}>
            <div
              className="item-two"
              onClick={() => goTimeRecord(-3, info?.waitCentrifugal)}
            >
              <div className="right">
                <span>待离心</span>
                <Badge count={info?.waitCentrifugalRed} offset={[-20, 20]}>
                  <h1>{info?.waitCentrifugal || 0}</h1>
                </Badge>
              </div>
            </div>
          </Col>
          <Col span={6}>
            <div
              className="item-two"
              onClick={() => goTimeRecord(-2, info?.waitFreeze)}
            >
              {/* <div className="left">
                <img src={people} alt="" />
              </div> */}
              <div className="right">
                <span>待冻存</span>
                <Badge count={info?.waitFreezeRed} offset={[-30, 20]}>
                  <h1>{info?.waitFreeze || 0}</h1>
                </Badge>
              </div>
            </div>
          </Col>
          <Col span={6}>
            <div
              className="item-two"
              onClick={() => goTimeRecord(-1, info?.waitSend)}
            >
              <div className="right">
                <span>待寄样</span>
                <Badge count={info?.waitSendRed} offset={[-30, 20]}>
                  <h1>{info?.waitSend || 0}</h1>
                </Badge>
              </div>
            </div>
          </Col>
        </Row>
        {info?.samplingExceptionUnResamplingNum ? (
          <Alert
            style={{ marginTop: 20 }}
            onClick={() => goAbnormal()}
            message={`你采集的样品有${info?.samplingExceptionUnResamplingNum}个异常，需要重新采集`}
            type="warning"
          />
        ) : null}
      </Card>
    </PageContainer>
  );
};
